<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<script src="<c:url value='/resources/js/jquery.dataTables.js'/>" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {

        /*event ketika selectKabupaten opsi nya dipilih.
        misal ketika kabupaten A terpilih, maka secara otomatis select kecamatan hanya akan menampilkan kecamatan
        dari kabupaten A saja.*/
        $("#selectKabupaten").change(function() {

            /*ambil idKabupaten dari selectKabupaten*/
            var idKabupaten = $("#selectKabupaten").attr("value");

            /*buat select kecamatan hanya berisi opsi pilih*//*
            $("#selectKecamatan").html("<option value=\"\">--pilih--</option>");
            *//*buat select kelurahan hanya berisi opsi pilih*//*
            $("select#kelurahan").html("<option value=\"\">--pilih--</option>");*/

            /*jika idKabupaten null atau kosong, abaikan saja proses pencarian, biarkan select kecamatan hanya beropsi pilih*/
            if (idKabupaten != null && idKabupaten.length > 0) {

                /*ambil data kecamatan berdasarkan idKabupaten dengan JSON*/
                $.getJSON("/kab/kecamatan/kabupaten/"+idKabupaten+".json", function(data) {

                    /*buat tag option baru untuk select kecamatan yang berdasarkan idKabupaten*/
                    /*var options = "<option value=\"\">--pilih--</option>";*/
                    var options = "";
                    for (var i=0;i < data.length;i++){
                        var option = "<option value=\"" + data[i].id + "\">" + data[i].nama + "</option>";
                        options = options.concat(option);
                    }

                    /*pasang tag options dari select kecamatan yang baru*/
                    $("#selectKecamatan").html(options);
                });
            }
        });

        /*event ketika selectKecamatan opsi nya dipilih.
        misal ketika kecamatan A terpilih, maka secara otomatis select kelurahan hanya akan menampilkan kelurahan
        dari kecamatan A saja.*/
        $("#selectKecamatan").change(function() {

            /*ambil idKecamatan dari selectKecamatan*/
            var idKecamatan = $("#selectKecamatan").attr("value");

            /*buat select kelurahan hanya berisi opsi pilih*/
            /*$("select#kelurahan").html("<option value=\"\">--pilih--</option>");*/

            /*jika idKecamatan null atau kosong, abaikan saja proses pencarian, biarkan select kelurahan hanya beropsi pilih*/
            if (idKecamatan != null && idKecamatan.length > 0) {

                /*ambil data kelurahan berdasarkan idKecamatan dengan JSON*/
                $.getJSON("/kab/kelurahan/kecamatan/"+idKecamatan+".json", function(data) {

                    /*buat tag option baru untuk select kelurahan yang berdasarkan idKecamatan*/
                    /*var options = "<option value=\"\">--pilih--</option>";*/
                    var options = "<option value=\"\">--pilih--</option>";
                    for (var i=0;i < data.length;i++){
                        var option = "<option value=\"" + data[i].id + "\">" + data[i].nama + "</option>";
                        options = options.concat(option);
                    }

                    /*pasang tag options dari select kelurahan yang baru*/
                    $("select#kelurahan").html(options);
                });
            }
        });
    });
</script>

<div class="content">
    <c:url value="/sekolah" var="sekolah_url"/>

    <form:form action="${sekolah_url}" method="PUT" modelAttribute="sekolah">
        <form:hidden path="id" id="id"/>
        <div class="blocksection">
            <div class="blockcontent">
                <h3>Masukkan Perubahan Data Sekolah</h3>
                <dl class="form-text">

                    <dt>
                        <label for="npsn">NPSN :</label>
                    </dt>
                    <dd>
                        <form:input path="npsn" id="npsn"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="npsn"/>
                        <p class="description">Masukkan NPSN Sekolah.</p>
                    </dd>
                    <dt>
                        <label for="nss">NSS :</label>
                    </dt>
                    <dd>
                        <form:input path="nss" id="nss"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="nss"/>
                        <p class="description">Masukkan NSS Sekolah.</p>
                    </dd>
                    <dt>
                        <label for="nama">Nama :</label>
                    </dt>
                    <dd>
                        <form:input path="nama" id="nama"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="nama"/>
                        <p class="description">Masukkan Nama Sekolah.</p>
                    </dd>


                    <dt><label>Kabupaten :</label></dt>
                    <dd>
                        <select id="selectKabupaten" >
                            <%--<option value="" selected="selected">--pilih--</option>--%>
                            <c:forEach items="${kabupatenList}" var="kabItem">
                                <c:choose>
                                    <c:when test="${kabItem == sekolah.kelurahan.kecamatan.kabupaten}">
                                        <option value="${kabItem.id}" selected="selected">${kabItem.nama}</option>
                                    </c:when>
                                    <c:otherwise>
                                        <option value="${kabItem.id}">${kabItem.nama}</option>
                                    </c:otherwise>
                                </c:choose>
                            </c:forEach>
                        </select>
                    </dd>
                    <dt><label>Kecamatan :</label></dt>
                    <dd>
                        <select id="selectKecamatan" >
                            <%--<option value="" selected="selected">--pilih--</option>--%>
                            <c:forEach items="${kecamatanList}" var="kecamatanItem">
                                <c:choose>
                                    <c:when test="${kecamatanItem == sekolah.kelurahan.kecamatan}">
                                        <option value="${kecamatanItem.id}" selected="selected">${kecamatanItem.nama}</option>
                                    </c:when>
                                    <c:otherwise>
                                        <option value="${kecamatanItem.id}">${kecamatanItem.nama}</option>
                                    </c:otherwise>
                                </c:choose>
                            </c:forEach>
                        </select>
                    </dd>
                    <dt>
                        <label for="kelurahan">Kelurahan : </label>
                    </dt>
                    <dd>
                        <form:select path="kelurahan" id="kelurahan">
                            <%--<form:option label="--pilih--" value=""/>--%>
                            <c:forEach items="${kelurahanList}" var="kelurahanItem">
                                <form:option value="${kelurahanItem.id}" label="${kelurahanItem.nama}"/>
                            </c:forEach>
                            <%--<form:options items="${kelurahanList}" itemValue="id" itemLabel="nama" />--%>
                        </form:select>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="kelurahan"/>
                    </dd>


                    <dt>
                        <label for="alamat">Alamat :</label>
                    </dt>
                    <dd>
                        <form:input path="alamat" id="alamat"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="alamat"/>
                        <p class="description">Masukkan Alamat Sekolah.</p>
                    </dd>

                    <dt>
                        <label for="satuanPendidikan">Satuan Pendidikan :</label>
                    </dt>
                    <dd>
                        <form:select path="satuanPendidikan" id="satuanPendidikan">
                            <%--<form:option label="--pilih--" value=""/>--%>
                            <c:forEach items="${satuanPendidikanList}" var="satuanPendidikanItem">
                                <form:option value="${satuanPendidikanItem}" label="${satuanPendidikanItem}"/>
                            </c:forEach>
                        </form:select>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="satuanPendidikan"/>
                    </dd>

                    <dt>
                        <label for="jenjangSekolah">Jenjang Pendidikan :</label>
                    </dt>
                    <dd>
                        <form:select path="jenjangSekolah" id="jenjangSekolah">
                            <%--<form:option label="--pilih--" value=""/>--%>
                            <c:forEach items="${jenjangSekolahList}" var="jenjangSekolahItem">
                                <form:option value="${jenjangSekolahItem}" label="${jenjangSekolahItem}"/>
                            </c:forEach>
                        </form:select>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="jenjangSekolah"/>
                    </dd>

                    <dt>
                        <label for="bank">Bank :</label>
                    </dt>
                    <dd>
                        <form:select path="bank" id="bank">
                            <%--<form:option label="--pilih--" value=""/>--%>
                            <form:options items="${bankList}" itemValue="id" itemLabel="nama" />
                            <%--<c:forEach items="${bankList}" var="bankItem">
                                <form:option value="${bankItem}" label="${bankItem.nama}"/>
                            </c:forEach>--%>
                        </form:select>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="bank"/>
                    </dd>

                    <dt>
                        <label for="rekening">No Rekening :</label>
                    </dt>
                    <dd>
                        <form:input path="rekening" id="rekening"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="rekening"/>
                        <p class="description">Masukkan Nomor Rekening Sekolah.</p>
                    </dd>
                    <dt>
                        <label for="penandatangan1">Penandatangan 1 :</label>
                    </dt>
                    <dd>
                        <form:input path="penandatangan1" id="penandatangan1"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="penandatangan1"/>
                        <p class="description">Masukkan Penandatangan 1 Sekolah.</p>
                    </dd>
                    <dt>
                        <label for="penandatangan2">Penandatangan 2 :</label>
                    </dt>
                    <dd>
                        <form:input path="penandatangan2" id="penandatangan2"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="penandatangan2"/>
                        <p class="description">Masukkan Penandatangan 2 Sekolah.</p>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="form-button">
            <div class="buttonWrapper">
                <a href="<c:url value='/sekolah'/>" class="back">Kembali</a>
            </div>
            <input type="submit" value="Simpan" name="submit_1" id="submit_1"/>
            <input class="grey" type="reset" value="Hapus" name="reset_1" id="reset_1"/>
        </div>
    </form:form>
</div>
